<template>
  <div class="dxgl">
    <div class="left-tree">
      <el-input placeholder="输入关键字进行过滤" v-model="filterText">
      </el-input>
      <el-tree
        :data="treeData"
        :props="defaultProps"
        @node-click="handleNodeClick"
      >
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <!-- <i :class="data?.children ? 'el-icon-folder' : 'el-icon-document'" /> -->
          <i class="el-icon-folder" />
          {{ data.title }}
        </span>
      </el-tree>
    </div>
    <div class="right-tree">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="关联状态">
          <el-select
            v-model="formInline.assoStatus"
            placeholder="请选择数据关联状态"
          >
            <el-option label="全部" value=""></el-option>
            <el-option label="已关联" value="已关联"></el-option>
            <el-option label="未关联" value="未关联"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="关键字">
          <el-input
            v-model="formInline.dbName"
            placeholder="请输入关键字查询"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button @click="onReset">重置</el-button>
        </el-form-item>
        <el-form-item class="fr">
          <el-button type="primary" @click="daoru">导入表</el-button>
        </el-form-item>
      </el-form>
      <div>
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          :header-cell-style="{ 'text-align': 'center' }"
          :cell-style="{ 'text-align': 'center' }"
        >
          <el-table-column type="index" width="50" label="序号">
          </el-table-column>
          <el-table-column prop="dbName" label="数据表名称"> </el-table-column>
          <el-table-column prop="depart" label="所属部门"> </el-table-column>
          <el-table-column prop="updateTime" label="更新时间">
          </el-table-column>
          <el-table-column prop="assoStatus" label="关联状态">
            <template slot-scope="scope">
              <span>{{ scope.row.assoStatus }}</span>
            </template> </el-table-column
          ><el-table-column prop="dbStatus" label="数据表状态">
            <template slot-scope="scope">
              <span>{{ scope.row.dbStatus }}</span>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="160">
            <template slot-scope="scope">
              <el-button
                @click="handleClick1(scope.row)"
                type="text"
                size="small"
                >关联配置</el-button
              >
              <el-button
                @click="handleClick2(scope.row)"
                type="text"
                size="small"
                >详情</el-button
              >
              <el-button
                @click="handleClick3(scope.row)"
                type="text"
                size="small"
                >编辑</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="dxgl-page">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <el-dialog :title="popTitle" :visible.sync="dialogVisible" width="1000px">
      <el-form
        :inline="true"
        :model="form"
        class="pop-form-inline"
        label-width="110px"
        :disabled="formDisabled"
      >
        <el-row :gutter="14">
          <el-col :span="8">
            <el-form-item label="数据表名称(中)">
              <el-input
                v-model="form.dbName"
                placeholder="数据表名称(中)"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="8">
            <el-form-item label="数据表名称(英)">
              <el-input
                v-model="form.dbCode"
                placeholder="数据表名称(英)"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="8">
            <el-form-item label="所属部门">
              <el-input
                v-model="form.depart"
                placeholder="所属部门"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="8">
            <el-form-item label="字段数量">
              <el-input
                v-model="form.fieldNum"
                placeholder="字段数量"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="8">
            <el-form-item label="是否负面清单">
              <el-select v-model="form.nagatType" placeholder="是否负面清单">
                <el-option label="是" value="是"></el-option>
                <el-option label="否" value="否"></el-option>
              </el-select> </el-form-item
          ></el-col>
          <el-col :span="8">
            <el-form-item label="数据规模">
              <el-input
                v-model="form.dataScale"
                placeholder="数据规模"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="8">
            <el-form-item label="数据类型">
              <!-- <el-select v-model="form.dataType" placeholder="数据类型">
                <el-option label="数值型" value="数值型"></el-option>
                <el-option label="字符型" value="字符型"></el-option>
              </el-select> -->
              <el-input
                v-model="form.dataType"
                placeholder="数据类型"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="8">
            <el-form-item label="表路径">
              <!-- <el-select v-model="form.tablePath" placeholder="表路径">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>  -->

              <el-cascader
                v-model="cascaderValue"
                :options="options"
                :props="{ checkStrictly: true, value: 'key', label: 'title' }"
                clearable
                @change="cascaderChange"
              ></el-cascader> </el-form-item
          ></el-col>
          <el-col :span="8">
            <el-form-item label="来源系统">
              <!-- <el-select v-model="form.source" placeholder="来源系统">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>  -->

              <el-input
                v-model="form.source"
                placeholder="来源系统"
              ></el-input> </el-form-item
          ></el-col>

          <el-col :span="8">
            <el-form-item label="申请次数">
              <el-input
                v-model="form.applyNum"
                placeholder="申请次数"
              ></el-input> </el-form-item
          ></el-col>

          <el-col :span="8">
            <el-form-item label="表创建时间">
              <el-date-picker
                v-model="form.createTime"
                type="date"
                placeholder="选择日期"
                disabled="true"
                value-format="yyyy-MM-dd HH:mm:ss"

              >
              </el-date-picker> </el-form-item
          ></el-col>
          <el-col :span="8">
            <el-form-item label="表最后更新时间">
              <el-date-picker
                v-model="form.updateTime"
                type="date"
                placeholder="选择日期"
                disabled="true"
                value-format="yyyy-MM-dd HH:mm:ss"
              >
              </el-date-picker> </el-form-item
          ></el-col>

          <el-col :span="8">
            <el-form-item label="完整度">
              <el-input
                v-model="form.integ"
                placeholder="完整度"
              ></el-input> </el-form-item
          ></el-col>

          <el-col :span="8">
            <el-form-item label="评分">
              <el-input
                v-model="form.score"
                placeholder="评分"
              ></el-input> </el-form-item
          ></el-col>

          <el-col :span="8">
            <el-form-item label="项目空间名">
              <el-input
                v-model="form.proSpace"
                placeholder="项目空间名"
              ></el-input> </el-form-item
          ></el-col>

          <el-col :span="8">
            <el-form-item label="数据库类型">
              <el-input
                v-model="form.dbType"
                placeholder="数据库类型"
              ></el-input> </el-form-item
          ></el-col>

          <el-col :span="8">
            <el-form-item label="应用主题">
              <el-input
                v-model="form.applyTheme"
                placeholder="应用主题"
              ></el-input> </el-form-item
          ></el-col>

          <el-col :span="8">
            <el-form-item label="业务场景">
              <el-input
                v-model="form.busiScen"
                placeholder="业务场景"
              ></el-input> </el-form-item
          ></el-col>

          <el-col :span="8">
            <el-form-item label="是否权威数据">
              <el-select v-model="form.powerFlag" placeholder="是否负面清单">
                <el-option label="是" value="是"></el-option>
                <el-option label="否" value="否"></el-option>
              </el-select> </el-form-item
          ></el-col>
          <el-col :span="8">
            <el-form-item label="是否主数据">
              <el-select v-model="form.mainFlag" placeholder="是否负面清单">
                <el-option label="是" value="是"></el-option>
                <el-option label="否" value="否"></el-option>
              </el-select> </el-form-item
          ></el-col>

          <el-col :span="24">
            <el-form-item label="表描述" style="width: 100%">
              <el-input
                style="width: 100%"
                v-model="form.remark"
                type="textarea"
                placeholder="表描述"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="8">
            <el-form-item label="数据表状态">
              <el-switch v-model="dbStatus" @change="switchChange"></el-switch
              ><span :class="switchClass">{{ form.dbStatus }}</span>
            </el-form-item></el-col
          >
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer" v-if="!formDisabled">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="popSubmit">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 导入数据 -->
    <ImportFile ref="importFile" />
  </div>
</template>

<script>
import { loadTreeRootML, mlGetBiao, editBiao } from "../serve/api";

import ImportFile from "./ImportFile.vue";

export default {
  name: "dxgl",

  components: {
    ImportFile,
  },

  data() {
    return {
      dbStatus: false,
      options: [],
      cascaderValue: [],
      formDisabled: false,
      total: 0,
      filterText: "",
      switchText: "下线",
      switchClass: "switch-xx",

      popTitle: "",
      form: {
        categoryId: "",
        dbName: "",
        depart: "",
        fieldNum: "",
        nagatType: "",
        dataScale: "",
        dataType: "",
        tablePath: "",
        source: "",
        applyNum: "",
        integ: "",
        score: "",
        proSpace: "",
        dbType: "",
        applyTheme: "",
        busiScen: "",
        assoStatus: "",
        dbStatus: "",
        assoView: "",
        remark: "",
        mainFlag: "",
        powerFlag: "",
      },
      dialogVisible: false,
      tableData: [
        {
          categoryId: "",
          dbName: "",
          depart: "",
          fieldNum: "",
          nagatType: "",
          dataScale: "",
          dataType: "",
          tablePath: "",
          source: "",
          applyNum: "",
          integ: "",
          score: "",
          proSpace: "",
          dbType: "",
          applyTheme: "",
          busiScen: "",
          assoStatus: "",
          dbStatus: "",
          assoView: "",
          remark: "",
          mainFlag: "",
          powerFlag: "",
        },
      ],
      formInline: {
        dbName: "",
        assoStatus: "",
      },
      treeData: [],
      defaultProps: {
        children: "children",
        label: "title",
      },
      biaoId: "a22d4a43-d3ae-42cc-ae29-090b60990bc4",
    };
  },

  created() {},

  mounted() {
    this.getTreeData();

    this.switchClass = "switch-xx";
    this.getBiao();
  },

  methods: {
    cascaderChange(data) {
      console.log(data);
      console.log(this.cascaderValue);
    },
    popSubmit() {
      this.form.tablePath = this.cascaderValue[this.cascaderValue.length - 1];
      editBiao(this.form).then((res) => {
        console.log(res);
        this.dialogVisible = false;
        this.getBiao();
      });
    },
    getTreeData() {
      loadTreeRootML({ async: false, pcode: "", title: "" }).then((res) => {
        console.log(res);
        this.treeData = res.data;
        this.options = res.data;
      });
    },

    switchChange(data) {
      if (data) {
        this.form.dbStatus = "上线";
        this.switchClass = "switch-sx";
      } else {
        this.form.dbStatus = "下线";
        this.switchClass = "switch-xx";
      }
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    handleClick1(data) {},
    handleClick3(data) {
      // this.switchText = JSON.parse(JSON.stringify(this.form.dbStatus));
      this.popTitle = "编辑";
      this.formDisabled = false;
      this.dialogVisible = true;
      this.form = Object.assign(this.form, data);

      this.form.dbStatus == "上线"
        ? (this.dbStatus = true)
        : (this.dbStatus = false);
    },
    handleClick2(data) {
      // this.switchText = JSON.parse(JSON.stringify(this.form.dbStatus));
      this.popTitle = "详情";
      this.formDisabled = true;
      this.dialogVisible = true;
      this.form = Object.assign(this.form, data);

      this.form.dbStatus == "上线"
        ? (this.dbStatus = true)
        : (this.dbStatus = false);
    },
    handleClick4(data) {},

    daoru() {
      this.$refs.importFile.show();
    },
    onSubmit() {
      this.getBiao();
    },
    onReset() {
      this.formInline = {
        dbName: "",
        assoStatus: "",
      };
    },

    handleNodeClick(data) {
      console.log(data);

      this.biaoId = data.key;
      this.getBiao();
    },
    getBiao() {
      mlGetBiao({
        dbName: this.formInline.dbName,
        assoStatus: this.formInline.assoStatus,
        categoryId: this.biaoId,
      }).then((res) => {
        console.log(res);
        this.tableData = res.data;
        this.total = res.count;
      });
    },
  },
};
</script>

<style lang="less" scoped>
.dxgl {
  width: 100%;
  min-height: 100%;
  padding: 10px 20px;
  display: flex;
  justify-content: space-around;
  box-sizing: border-box;

  width: 100%;
  height: 100%;
  .left-tree {
    width: 240px;
    min-height: 100%;
    border: 1px solid #ccc;
    box-sizing: border-box;
  }
  .right-tree {
    width: calc(100% - 260px);
    height: 100%;
    border: 1px solid #ccc;
    box-sizing: border-box;
    padding: 20px;
    box-sizing: border-box;
    .dxgl-page {
      text-align: right;
      margin-top: 10px;
    }
  }
  .switch-sx {
    color: #006569;
    margin-left: 10px;
    vertical-align: middle;
  }
  .switch-xx {
    color: #999;
    margin-left: 10px;
    vertical-align: middle;
  }
  //   /deep/.user {
  //   //   background: url("../../assets/logo.png");
  //   background: url("../assets/images/img (1).png");

  //   box-sizing: border-box;
  //   background-size: 100%;
  //   background-repeat: no-repeat;
  // }
  // /deep/.el-tree-node__expand-icon {
  //   transform: rotate(-90deg);
  // }
  // /deep/.el-tree-node__expand-icon.expanded {
  //   transform: rotate(0deg);
  // }
}
</style>
<style>
.pop-form-inline .el-form-item__content {
  width: calc(100% - 110px) !important;
}
.pop-form-inline .el-date-editor.el-input {
  width: 100%;
}
</style>
